<template>
	<view
	style="background-color: #FFFFFF;"
	@click="jumpUrl(`/pages/user/shop/detail/detail?goodsId=${ item.goodsId }`)"
	>
		<view class="u-radius-8 commodity-card flex">
			<view class="u-radius-10 commodity-img clear-flex u-m-r-14">
				<x-image :src="showImage(item.imgUrl, 'logo')"/>
			</view>
			
			<view
			class="flex-between flex-column"
			style="padding: 4rpx 0 4rpx 20rpx; height: 194rpx; width: 100%;"
			>
				<view class="u-f-28 u-lh-40 font-medio linecamp-2">{{ item.title || '' }}</view>
				
				<view
				class="u-f-26 u-lh-36 flex-between flex-column"
				style="height: 112rpx;"
				>
					<view class="stock-tag u-m-t-10 u-f-20 u-lh-28">{{ lang_goods.stock }}{{ hasCount }}</view>
					
					<view class="flex-center-between u-m-t-14">
						<view class="flex-center-between">
							<view class="flex-baseline">
								<view
								class="flex-baseline u-lh-38 font-bold"
								style="color: #FC2642;"
								>
									<view class="u-f-32">{{ lang_unit.money }}</view>
									<view class="u-f-44">{{ item.discountPrice || 0 }}</view>
								</view>
								<view
								v-if="item.allowIntegral"
								class="flex u-m-l-12 u-f-24 u-lh-28"
								style="color: #B46617;"
								>
									<view class="font-bold">{{ item.integral || 0 }}{{ lang_common.score }}</view>
								</view>
							</view>
						</view>
						
						<x-common-btn
						width="124"
						height="50"
						:background="hasCount ? 'linear-gradient(to right, #F94404 0%, #FD164F 100%)' : '#C4C4C4'"
						>{{ lang_common.buy }}</x-common-btn>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({ })
			}
		},
		data() {
			return {}
		},
		computed: {
			hasCount() {
				let { stock  } = this.item
				return (stock || 0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.commodity {
		&-card {
			padding: 16rpx 14rpx 18rpx 14rpx;
			border-radius: 8rpx;
		}
		
		&-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #f9f9f9;
		}
	}
	
	.stock-tag {
		padding: 6rpx 10rpx;
		width: max-content;
		color: #FC2642;
		border: 1rpx solid #FC2642;
		border-radius: 8rpx;
	}
</style>
